<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <div class="search-box">
          <el-form-item label="体检单号">
            <el-input v-model="searchForm.orderNo" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="searchForm.customerName" clearable></el-input>
          </el-form-item>
          <el-form-item label="证件号" @change="getlist">
            <el-input v-model="searchForm.credNum" clearable @keyup.enter.native="getlist"></el-input>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input v-model="searchForm.enterpriseName" clearable></el-input>
          </el-form-item>
          <el-form-item label="二级部门">
            <el-input v-model="searchForm.twoLevelDeptName" clearable></el-input>
          </el-form-item>
          <el-form-item label="体检状态">
            <el-select v-model="searchForm.registerStatus" clearable>
              <el-option v-for="(v,i) in orderCheckStatus" :label="v.label" :value="v.value" :key="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
                icon="el-icon-search"
                type="primary"
                @click="getlist"
            >查询
            </el-button>
          </el-form-item>
        </div>

        <div class="options">
          <el-row>
            <el-col>
              <h3 style="text-align: right; font-size: 18px; display: inline; margin-right: 100px">
                今日预约人数：{{ countData.todayOrderCount }}，登记人数：{{ countData.todayCheckCount }}，已交表人数：{{
                  countData.todayInTableCount
                }}，未交表人：{{ countData.todayNoTableCount }}
              </h3>
              <el-checkbox v-model="autoPrint" style="margin-right: 80px">开启自动打印指引单</el-checkbox>
            </el-col>
          </el-row>
          <div>
            <div>
              <!-- 多选换成下面这个 -->
              <!-- @selection-change="handleSelectionChange" -->
              <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :row-key="record=>record.id"
                  @select="selectrow"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="orderNo" label="体检单号" width="200">
                </el-table-column>
                <el-table-column prop="customerName" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="120">
                  <template slot-scope="scope">{{ scope.row.sex|formatSex }}</template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="telephone" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="credNum" label="证件号" width="200"></el-table-column>
                <el-table-column label="单位名称/二级部门" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">{{ scope.row.enterpriseName }} {{ scope.row.twoLevelDeptName }}
                  </template>
                </el-table-column>
                <el-table-column prop="contractName" label="套餐/合同名称" width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="examType"
                    label="体检分组"
                    show-overflow-tooltip
                >
                  <template slot-scope="scope">{{ scope.row.examType|formatType }}</template>
                </el-table-column>
                <el-table-column prop="payStatus" label="缴费状态">
                  <template slot-scope="scope">{{ scope.row.payStatus === 1 ? '已缴费' : '未缴费' }}</template>
                </el-table-column>
                <el-table-column
                    prop="signDatetime"
                    label="登记时间"
                    show-overflow-tooltip
                >
                  <template slot-scope="scope">{{ scope.row.signDatetime|formatDate }}</template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="体检状态"
                    show-overflow-tooltip
                >
                  <template slot-scope="scope">{{ scope.row.status|formatStatus }}</template>
                </el-table-column>
                <el-table-column label="操作" width="320" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="toPrintZYDselect(scope.row)">打印指引单</el-button>
                    <el-button type="success" size="mini" @click="toPrintBarcode(scope.row)">打印条码</el-button>
                    <el-button type="info" size="mini" @click="toShowItems(scope.row)">浏览项目</el-button>
                    <!--
                    <el-button
                        type="primary"
                        size="mini"
                        @click="getCustomer(scope.row)"
                    >修改个人信息
                    </el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        @click="remove(scope.row)">
                      删除
                    </el-button>
                    -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNo"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>

      </el-form>
    </div>

    <!-- 打印需要用到的组件 -->
    <div style="opacity: 0; position: absolute; z-index: -1; width: 0; height: 0; overflow: hidden;">
      <barcodePrint v-if="barcodePage" :order="{barcodeList:barcodeList,peOrdersMain:printOrder}" ref="qrcode" />
      <orderPrint v-if="printzhiyindan" ref="zyd" :order="printOrder"></orderPrint>
    </div>

    <!-- 打印指引单 -->
    <!-- <el-dialog width="70%" :visible.sync="printzhiyindan" class="top_dialog">
      <div id="printTest">
        <orderPrint ref="zyd" :order="printOrder"></orderPrint>
      </div>
      <span slot="footer" class="dialog-footer noprint">
				<el-button type="primary" @click="doOrderPrint">打 印</el-button>
				<el-button @click="printzhiyindan = false">关 闭</el-button>
			</span>
    </el-dialog> -->

    <!-- 打印条码 -->
    <!-- 打印条码：table列表 -->
    <el-dialog title="打印条码" :visible.sync="printtiaoma">
      <el-table
          :row-key="record=>record.id"
          ref="multipleTable"
          :data="printItemlist"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionBarcode"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="itemName" label="项目名称" width="120">
        </el-table-column>
        <el-table-column prop="code" label="条码号">
        </el-table-column>
      </el-table>
      <div class="dfooter">
        <div class="">
          <el-button type="danger" @click="doBarcodePrint">打印条码</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 打印条码：打印页面(条形码) -->
    <!-- <el-dialog width="70%" :visible.sync="barcodePage" class="top_dialog">
      <div id="barcodePrint">
        <barcodePrint :order="{barcodeList:barcodeList,peOrdersMain:printOrder}" ref="qrcode" />
      </div>
      <div slot="footer" class="dialog-footer noprint">
        <el-button type="primary" v-print="'#barcodePrint'" @click="doBarcodePrint">打印</el-button>
        <el-button @click="barcodePage = false">取 消</el-button>
      </div>
    </el-dialog> -->

    <!-- 查项-->
    <el-dialog
        title="体检单项目浏览"
        width="60%"
        :visible.sync="itemShowDialog"
        class="top_dialog"
    >
      <!-- 穿梭框-->
      <div>
        <el-row :gutter="20" class="bg-grey">
          <el-col>
            <div class="tableTitle pb-20">
              当前体检项目:{{ selectedItemList.length }}项，合计金额：{{ orderForm.salePrice }}元
            </div>
            <div class="bg-blue">
              <el-table
                  :data="selectedItemList"
                  :row-key="record=>record.itemId"
                  max-height="315"
                  border
                  fit
                  highlight-current-row
              >
                <el-table-column label="项目名称" prop="itemName"></el-table-column>
                <el-table-column label="价格" align="center" prop="price"></el-table-column>
                <el-table-column label="适用范围" align="center" prop="applyTo">
                  <template slot-scope="scope">{{ scope.row.applyTo|formatApplyTo }}</template>
                </el-table-column>
              </el-table>
            </div>

            <div class="nsm-bottom-line" v-if="newCustomer" style="font-weight: bold;font-size: 16px">
              <span>姓名：{{ newCustomer.customerName }}</span>
              <span>性别：{{ newCustomer.sex|formatSex }}</span>
              <span>年龄：{{ newCustomer.age }}</span>
              <span>单位：{{ newCustomer.enterpriseName }}</span>
            </div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px" type="flex" align="middle">
          <el-col :span="12" class="text-red">
          </el-col>
          <el-col :span="11" :offset="1">
            <el-row>
              <el-button @click="itemShowDialog = false">关 闭</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 修改个人信息 -->
    <el-dialog
        title="个人体检"
        :visible.sync="dialogFormVisible"
        width="80%"
        class="top_dialog"
    >
      <el-form :model="customerForm" label-position="left">
        <div class="add_info">
          <userinfos ref="riskForm" :queryform="customerForm" :dictdata="dict"></userinfos>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addinsertCustom">保存</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 打印缴费通知单 -->
    <!--
    <el-dialog
        width="70%"
        title="打印缴费通知单"
        :visible.sync="jiaofei"
        class="top_dialog"
        append-to-body
    >
      <h3 class="title-common">
        首都医科大学附属<br/>北京世纪坛医院体检中心缴费通知单
        <span>No.000020</span>
      </h3>
      <el-form
          :inline="true"
          :model="jfnoticeorder"
          class="demo-form-inline printform"
      >
        <el-form-item label="姓名:">
          <el-input
              v-model="jfnoticeorder.name"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-input
              v-model="jfnoticeorder.sex"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄:">
          <el-input
              v-model="jfnoticeorder.age"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位:">
          <el-input
              v-model="jfnoticeorder.company"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="二级部门:">
          <el-input
              v-model="jfnoticeorder.twoLevelDeptName"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="体检单号:">
          <el-input
              v-model="jfnoticeorder.number"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="缴费日期:">
          <el-input
              v-model="jfnoticeorder.paytime"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
              v-model="jfnoticeorder.back"
              clearable
              class="printinput"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-table
          :data="jfnoticetable"
          border
          :summary-method="getSummaries"
          show-summary
          :row-key="record=>record.id"
          style="width: 100%"
      >
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column prop="total" label="小计"></el-table-column>
        <el-table-column prop="back" label="备注"></el-table-column>
      </el-table>
      <div class="jfnoticebottom">
        <span>开单人：</span><span>收费员（签字）：</span
      ><span>客户（签字）：</span>
      </div>
      <div>注意：本单据仅为客户缴费参考提醒，不能作为缴费凭证使用。</div>
    </el-dialog>
    -->
  </div>
</template>

<script>
import userinfos from "../common/userinfos.vue";
import crumbs from "../../views/Crumbs.vue";
import orderPrint from "../common/orderPint.vue";
import barcodePrint from "../common/barcodePrint.vue";
import {formatTimeToStr} from "@src/common/utils/date";
import {orderCheckStatus, optionsSex} from "@src/common/utils/constant";
import VueBarcode from 'vue-barcode';

// import axios from 'axios'

export default {
  components: {
    crumbs,
    userinfos,
    VueBarcode,
    orderPrint,
    barcodePrint,
  },
  data() {
    return {
      // 定时器
      orderCheckStatus: orderCheckStatus,
      timehttp: '',
      optionsSex: optionsSex,
      dict: {},
      action: null,
      customerCurId: null,
      newCustomer: null,
      checked: false,
      queryform: {},
      isPaid: false,
      handTableForm: {},
      orderId: null,
      customId: null,
      cus: null,
      orderInfo: {},
      customerForm: {},
      isLinkDept: false,

      activeTab: 1,
      searchForm: {},
      pageSize: 10,
      pageNo: 1,
      scanCodeInfo: {},
      scanCodeInfoTotal: [],
      orderTotal: 0,
      autoPrint: false,
      autoCredNum: false,

      // 条码参数
      barcodeValue: "2220202010",
      // 打印指引单参数
      printObj: {
        id: "printTest",
        popTitle: '打印',
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
      },
      printBarcode: {
        id: "barcodePrint",
        popTitle: '打印',
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
      },
      // 打印内容详情
      printOrder: {},
      printItemlist: [],
      barcodeList: [],

      // 缴费通知单表单
      jfnoticeorder: {
        name: "雪莉",
        sex: "女",
        age: 20,
        company: "单位单位单位",
        number: "2022010239",
        paytime: "2022-04-10",
        back: "无异常",
      },
      jfnoticetable: [
        {
          name: "一般检查",
          price: 135.0,
          number: 10,
          total: 1350.0,
          back: "定期复查",
        },
      ],

      // 全选/不选状态
      nsmAll: false,
      // 全选框值
      multipleSelection: [],
      // 待选
      // 近期待检名单
      camerais: false,
      videoWidth: 600,
      videoHeight: 400,
      imgSrc: "",
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      tableDatas: [],
      tableData: [],

      dialogFormVisible: false,
      dialogFormVisiblef: false,

      // 打印
      jiaofei: false,
      printtiaoma: false,
      barcodePage:false,
      printzhiyindan: false,
      itemShowDialog: false,
      selectedItemList:[],
      orderForm:{},
			peOrdersMain: {},
      newinfo: false,
      form: {},
      formLabelWidth: "80px",
      formInline: {},
      BreadCrumb: [
        {path: "", name: "检中管理"},
        {path: "/front/register", name: "体检登记"},
      ],
      // 登记人数
      countData: {},
      total: 0,
    };
  },
  filters: {
    formatSex: function (val) {
      var dict = {1: "男", 2: "女"}
      return dict[val]
    },
    formatType: function (val) {
      var dict = {1: "普通体检", 2: "单位体检", 3: "入职体检", 4: "职业体检", 5: "婚育体检", 6: "老年专项体检", 7: "健康体检等"}
      return dict[val]
    },
    formatStatus: function (val) {
      var dict = {1: "未登记", 2: "登记", 4: "检中", 8: "交表", 16: "初检", 32: "复检", 64: "打印"}
      // const dict = {}
      // orderCheckStatus.forEach(v => {
      //   dict[v.value] = v.label
      // })
      return dict[val]
    },
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
    formatApplyTo: function (val) {
      const dict = {}
      optionsSex.forEach(v => {
        dict[v.value] = v.label
      })
      return dict[val] || val
    },
    formatPayStatus: function (val) {
      var dict = {1: "已缴费", 0:"未缴费"}
      return dict[val]
    }
  },
  mounted() {
    this.getToday();
    this.getlist();
    this.searchDictList()
    this.identityCard()
  },
  beforeDestroy(){
    clearInterval(this.timehttp)
  },
  methods: {
    // 定时器
    identityCard(){
      this.timehttp = setInterval(() => {
        this.doIdentityCard()
      },2500)
    },
    doIdentityCard(){
      // var url = 'http://127.0.0.1:30088/ID=sfz';
      // this.$jsonp(url).then((res) => {
      //   if(!res.data.error){
      //     let stringtext = res.data.info
      //     let listarr = stringtext.split("-")
      //     listarr[0] = listarr[0].trim()
      //     // 名字
      //     this.$set(this.searchForm,"customerName",listarr[0])
      //     this.$set(this.searchForm,"credNum",listarr[4])
      //     // 提交
      //     this.getlist()
      //   }
      // }).catch((error) => {
      //   console.log(error);
      // })
      const that = this
      $.ajax({
				type: 'GET',
				timeout: 10000,
				url: 'http://localhost:30088/ID=sfz',
				dataType: 'jsonp',
				success: function(data) {
          if (!data.error) {
            let stringtext = data.info
            let listarr = stringtext.split("-")
            listarr[0] = listarr[0].trim()
            if (this.searchForm.credNum !== listarr[4]) {
              // 名字
              that.$set(that.searchForm,"customerName",listarr[0])
              that.$set(that.searchForm,"credNum",listarr[4])
              // 提交
              that.getlist()
            }
          }
				},
				error: function(err) {
          console.log('err', err)
				}
			})
    },

    searchDictList() {
      this.$axios.searchDictList({
        codes: ["tyType", "xmType", "jgType", "mzType", "gwType", "zwType", "ybType", "dwxzType", 'zylbType','zjType'],
      }).then((res) => {
        if (res.code === "00000") {
          res.data.forEach(v => {
            this.dict[v.dictCode] = v.items
          })
        }
      });
    },
    doOrderPrint(){
      // var style = document.createElement('style');
      // style.innerHTML = "@media print { @page {size:210mm 297mm!important; margin: 0;padding: 3cm;font-size:12px;} .noprint { display: none;}}";
      // window.document.head.appendChild(style);
      // var prints = document.getElementById('printTest');
      this.$refs.zyd.print()
    },
    doBarcodePrint(){
      // var style = document.createElement('style');
      // style.innerHTML = "@media print { @page {size:50mm 29.7mm!important; margin: 3mm;font-size:12px;} .noprint { display: none;} .barcode-box{height: 30mm;background: red;font-size:10pt}}";
      // window.document.head.appendChild(style);
      // var prints = document.getElementById('printTestTM');
      this.barcodePage = true
      setTimeout(() => {
        this.$refs.qrcode.print()
      }, 100);
    },
    toShowItems(row){
      this.itemShowDialog= true
      this.orderForm={}
      this.orderId = row.id
      this.$axios.getPeOrdersMainById({peOrdersMainId: row.id}).then(res => {
        if (res.code === '00000') {
          const data = res.data;
          this.orderCurr = data
          this.selectedItemList = data.peOrdersDetails
          let totalPrice = 0
          this.selectedItemList.forEach(v=>{
            totalPrice += v.price
          })
          this.orderForm.salePrice =  parseFloat(totalPrice,2)
          this.newCustomer = data.peCustomers
        }
      })
    },
    // 登记状态
    getToday() {
      this.$axios.getTodayPersonCount({}).then((res) => {
        if (res.code === "00000") {
          this.countData = res.data;
        }
      });
    },
    // 列表刷新
    getlist() {
      this.doGetList(this.searchForm)
    },
    doGetList(req){
      this.$axios.getCheckList(req)
          .then((res) => {
            if (res.code === "00000") {
              this.tableData = res.data.records;
              this.total = res.data.total;
              if(this.autoPrint && res.data.records.length===1){
                // 打印指引单
                var order = res.data.records[0]
                this.printZYD(order)
              }
            }
          });
    },
    rest() {
      this.searchForm = {pageNo: 1, pageSize: 10}
      this.getlist()
    },

    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },

    // 条码打印
    toPrintBarcode(order) {
      this.printOrder = {
        customerName:order.customerName,
        sex:order.sex,
        age:order.age,
        company:order.enterpriseName,
      }
      this.$axios.queryItemScanCodeInfo({
        orderId: order.orderId,
      }).then(res => {
        if (res.code === '00000') {
          this.printItemlist = res.data
          this.printtiaoma = true
        }
      })

    },

		// 单选
		selectrow(selection, row) {
		  this.selectinfo = row;
			// console.log("选中的信息: ",this.selectinfo);
		  if (selection.length > 1) {
		    let del_row = selection.shift()
		    this.$refs.multipleTable.toggleRowSelection(del_row, false) // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		  }
		},

		toPrintZYDselect(order) {
			this.printZYD(order)
		},

    // 点开打印指引单
    printZYD(order) {
      this.printOrder = {
        customerName:order.customerName,
        sex:order.sex,
        age:order.age,
        company:order.enterpriseName,
        groupName:order.groupName,
        telephone:order.telephone,
        signDatetime:order.signDatetime,
        barcodeValue:order.orderNo,
      }
      const orderId = order.orderId
      this.$axios.guideOrderPrintSubmit({
        orderIds:[orderId],printTypes:[3]
      }).then(res=>{
        if (res.code === '00000') {
          this.$axios.getPeOrdersAllDetails({
            ordersId: orderId,
          }).then(res => {
						if (res.code === '00000') {
							// this.printItemlist = res.data.peOrdersDetailsList    //获取体检项目
							// this.peOrdersMain = res.data.peOrdersMain   //获取客户信息
							this.printOrder = res.data
							this.printzhiyindan = true
              setTimeout(() => {
                this.$refs.zyd.print()
              }, 200);
						}
          })
        }
      })
    },

    handTable(){
      this.$axios.getScanCodePersonCount(this.handTableForm).then(res => {
        if (res.code === '00000') {
          this.scanCodeInfo = res.data
          this.scanCodeInfoTotal = [
            {
              todayCheckCount: res.data.todayCheckCount,
              todayInTableCount: res.data.todayInTableCount,
              todayNoTableCount: res.data.todayNoTableCount,
            }
          ]
        }
      })
    },



    getCustomer(row) {
      this.customerCurId = row.id
      this.$axios.getPeCustomersById({
        peCustomersId: row.customerId
      }).then(res => {
        if (res.code == '00000') {
          this.customerCurId = res.data.id
          this.customerForm = res.data
          this.title = '编辑信息'
          this.dialogFormVisible = true
        }
        // console.log(res.data,this.queryform)
      })
    },
    // 个人信息编辑
    addinsertCustom(formName) {
      // 在这里验证
      console.log(this.$refs.riskForm.$refs.riskFormRef.model);
      this.$refs.riskForm.$refs.riskFormRef.validate((valid) => {
        if (valid) {
          // 获取子组件form
          this.checkform = this.$refs.riskForm.$refs.riskFormRef.model;
          if (this.customerCurId == null) {
        this.$axios
            .insertPeCustomers({
              ...this.checkform,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.newCustomer = res.data
                this.newinfo = false;
                this.checkform = {}
              }
            });
      }
          else {
        this.$axios
            .updatePeCustomers({
              ...this.checkform
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.dialogFormVisible = false;
                this.getlist();
              }
            });
      }
        }
      });
    },


    // 删除
    remove(row) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.deletePeOrdersMain({
          orderId: row.id,
        }).then((res) => {
          if (res.code === "00000") {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getlist();
          }
        });
      });
    },

    // 合计方法
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (column.property === "total") {//需要显示和合计纵列
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
        }
        // if (!values.every(value => isNaN(value))) {
        // 	sums[index] = values.reduce((prev, curr) => {
        // 		const value = Number(curr);
        // 		if (!isNaN(value)) {
        // 			return prev + curr;
        // 		} else {
        // 			return prev;
        // 		}
        // 	}, 0);
        // 	sums[index];
        // } else {
        // }
      });

      return sums;
    },
    // 删除体检套餐
    deletetaocan() {
      // console.log('第1个数组',this.multipleSelection)
      // console.log('第2个数组',this.listgeren)
      this.multipleSelection.forEach(data => {
        this.listgeren.push(data);
        //通过两个数组的id进行对比过滤
        this.listgeren = this.listgeren.filter(item => item.id != data.id)
      })
      // console.log('过滤后的数组',this.listgeren)
    },
    // 查找by id  ???有问题，应该用名称搜索
    getExamItemById() {
      this.$axios.examItemContentList({
        itemName: this.formInline.itemName
      }).then(res => {
        if (res.code == '00000') {
          this.examItemList = res.data.records
        }
        console.log(res)
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length === 0) {
        this.nsmAll = false;
      } else {
        this.nsmAll = true;
      }
    },
    handleSelectionBarcode(val){
      this.barcodeList = val;
    },

    // 打开照相机
    getCompetence() {
      var _this = this;
      _this.imgSrc = "";
      _this.camerais = true;
      this.thisCancas = document.getElementById("canvasCamera");
      this.thisContext = this.thisCancas.getContext("2d");
      this.thisVideo = document.getElementById("videoCamera");
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
      // 使用getUserMedia，因为它会覆盖现有的属性。
      // 这里，如果缺少getUserMedia属性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先获取现存的getUserMedia(如果存在)
          var getUserMedia =
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.getUserMedia;
          // 有些浏览器不支持，会返回错误信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(
                new Error("getUserMedia is not implemented in this browser")
            );
          }
          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      var constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: "scaleX(-1)",
        },
      };
      navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function (stream) {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in _this.thisVideo) {
              _this.thisVideo.srcObject = stream;
            } else {
              // 避免在新的浏览器中使用它，因为它正在被弃用。
              _this.thisVideo.src = window.URL.createObjectURL(stream);
            }
            _this.thisVideo.onloadedmetadata = function (e) {
              _this.thisVideo.play();
            };
          })
          .catch((err) => {
            console.log(err);
          });
    },
    // 绘制图片（拍照功能）

    setImage() {
      var _this = this;
      // 点击，canvas画图
      _this.thisContext.drawImage(
          _this.thisVideo,
          0,
          0,
          _this.videoWidth,
          _this.videoHeight
      );
      // 获取图片base64链接
      var image = this.thisCancas.toDataURL("image/jpg");
      _this.imgSrc = image;
      this.$emit("refreshDataList", this.imgSrc);
    },
    // base64转文件

    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(",");
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type: mime});
    },
    // 关闭摄像头

    stopNavigator() {
      this.camerais = false;
      this.thisVideo.srcObject.getTracks()[0].stop();
    },
  },
};
</script>

<style scoped>


.tableTitle {
  padding-top: 10px;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.bg-blue {
  height: 315px;
  background-color: #cfe8f4;
  border: 1px solid #cfe8f4;
  overflow-y: auto;
}

.bg-grey {
  background-color: #f2f2f2;
}

.buttonAll {
  padding-bottom: 50px;
}

.text-red {
  color: #d9001b;
}

.mt-20 {
  margin-top: 20px;
}

.pt-20 {
  padding-top: 20px;
}

.pb-20 {
  padding-bottom: 20px;
}

.mar-10 {
  padding: 0 10px;
}

.check-style {
  margin: 10px 0 0 40px !important;
}

.staffButton {
  margin-top: 20px;
}

.nsm-right-top {
  display: inline;
  margin-left: 10px;
}

.pagination {
  text-align: center;
}

.nsm-bottom-line {
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  background-color: #fff;
}

.vmm {
  margin-top: 10px;
}

.disflex {
  display: flex;
  justify-content: space-between;
}

.main_box_title {
  background: #fff;
  padding: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.header_top .el-divider--horizontal {
  margin-top: 0px;
}

.add_info .el-divider--horizontal {
  margin-top: 10px;
}

.add_info {
  /*display: flex;*/
  padding: 0px 20px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.staff_form_btn {
}

.info_l {
  text-align: left;
  flex: 1;
}

.info_r {
  text-align: left;
  flex: 1;
  margin-left: 30px;
}

.info_l_input {
  width: 82%;
}

.info_l_button {
  margin-left: 10px;
}

.info_sel_r_groupn {
  margin-left: 40px;
}

.info_sel_r_group {
  margin-left: 10px;
}

.info_sel {
  display: flex;
}

.info_sel_l {
  width: 50%;
}

.info_sel_r {
  width: 50%;
  margin-left: 50px;
}

.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

.info_l_head {
}

.pagination {
  text-align: center;
}

.top_dialog /deep/ .el-dialog {
  margin-top: 3vh !important;
}

.photog {
  width: 600px;
  height: 400px;
  margin: 10px auto;
}

.photog video {
  width: 600px;
  height: 400px;
}

.photog canvas {
  width: 600px;
  height: 400px;
}

.info_sel_s_butn {
  margin: 0px auto;
}

.info_sel_butn {
  margin-left: 20px;
}

.info_sel_s {
  margin-left: 20px;
}

.ldog_butn {
  width: 120px;
  height: 50px;
  margin: 0px auto;
}

.form_div {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}

.block {
  text-align: center;
}

.lai_div {
  margin-top: 20px;
  display: flex;
}

.lai_div_l {
  width: 480px;
}

.lai_div_l /deep/ .el-input--suffix {
  width: 400px;
}

.lai_div_r {
  margin-left: 20px;
}

.yvyue_div {
  display: flex;
  justify-content: space-between;
}

.yvyue_div button {
  width: 150px;
}

.options {
  position: relative;
}

.options_div {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 99 !important;
}

/* 扫码交表 */
.smjb-top {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.smjbtablestyle {
  margin: auto;
}

.title1 {
  margin: 20px auto;
  width: 80%;
  font-size: 20px;
}

.smfooter {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  font-size: 12px;
  color: #d9001b;
  border-top: 1px solid #eee;
}

.dfooter {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}

.zyd-code {
  font-size: 28px;
}

.zyd-title {
  font-size: 32px;
  text-align: center;
}

.zyd-item {
  margin-top: 20px;
  font-size: 16px;
}

.fontstylekai,
.adjusttable {
  font-family: "楷体";
}

.title4 {
  margin-top: 20px;
  padding: 15px 0;
  text-align: center;
}

.adjusttable {
  width: 100%;
  font-size: 18px;
}

.adjusttable td {
  padding: 20px 0;
  border-bottom: 1px solid #999;
}

.adjusttable td:nth-child(2) {
  width: 60%;
}

.adjusttable .el-checkbox__label {
  font-size: 18px !important;
}

.title-common {
  position: relative;
  padding: 30px 0;
  text-align: center;
  font-size: 26px;
  font-weight: normal;
}

.title-common span {
  position: absolute;
  right: 0;
}

/* 打印表单样式 */
.printinput /deep/ .el-input__inner {
  border: 0;
  border-bottom: 1px solid #333;
  border-radius: 0;
}

.jfnoticebottom {
  display: flex;
  margin: 20px 0 40px;
}

.jfnoticebottom span {
  flex: 1;
}

.zyd-title {
  font-size: 26px;
}

.info_sel_r_img {
  width: 130px;
  height: 150px;
}
</style>
